<!--
 * @Author: 姚杰鸿 adolphus520@163.com
 * @Date: 2024-10-30 17:07:16
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-11 17:30:23
 * @Description: file content
-->
<template>
  <div style="margin: 10px">
    <span
      v-for="item in themeColors"
      :key="item.themeName"
      :style="{
        background: item.color,
        width: '20px',
        height: '20px',
        display: 'inline-block',
        marginRight: '10px',
        cursor: 'pointer',
        border: '1px solid #333',
        borderRadius: '10%',
      }"
      @click="changeThemeColor(item.color)"
    ></span>
  </div>
</template>

<script lang="ts" setup>
import { useStorage } from "@vueuse/core";
import { useElementPlusTheme } from "use-element-plus-theme";

const layoutThemeColor = useStorage("layout-theme-color", "#243db9"); // 默认主题色
const { changeTheme } = useElementPlusTheme(layoutThemeColor.value); // 初始化主题色

const themeColors = [
    { color: "#1b2a47", themeName: "道奇蓝" },
    { color: "#722ed1", themeName: "深紫罗兰色" },
    { color: "#eb2f96", themeName: "深粉色" },
    { color: "#f5222d", themeName: "猩红色" },
    { color: "#fa541c", themeName: "橙红色" },
    { color: "#13c2c2", themeName: "绿宝石" },
    { color: "#52c41a", themeName: "酸橙绿" },
  ],
  changeThemeColor = (color: string) => {
    layoutThemeColor.value = color; // 保存主题色
    changeTheme(color); // 修改 Element Plus 组件主题色
  };
</script>

<style lang="scss" scoped></style>
